<template>
    <div>
        <div class="clearfix">
            <Form class="f-fl" inline :label-width="5">
                <FormItem>
                    <Select
                        v-model="params.classId"
                        placeholder="班级"
                        style="width:180px"
                        clearable
                    >
                        <Option v-for="item in classList" :key="item.classId" :value="item.classId" :label="item.className" />
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="search">搜索</Button>
                </FormItem>
                <FormItem>
                    <Button @click="clearSearch">清空</Button>
                </FormItem>
            </Form>
            <div class="f-fr">
                <Button style="margin-left: 10px;" @click="toggleModel">列表</Button>
            </div>
        </div>
        <Table :data="list" :columns="columns" />
        <ScorePie :data="pieData" style="height:400px" />
    </div>
</template>
<script>
import { distributionDiagram } from '@/api/trainingManage'
import ScorePie from './ScorePie'

export default {
    props: {
        id: {
            type: String,
            default: ''
        },
        training: {
            type: Object,
            default: () => ({
                classList: []
            })
        }
    },
    components: {
        ScorePie
    },
    data () {
        return {
            list: [],
            params: {
                classId: '',
                pageSize: 10,
                pageNum: 1
            },
            columns: Object.freeze([
                { title: '序号', type: 'index', align: 'center', width: 80 },
                { title: '成绩', key: 'score', align: 'center' },
                { title: '人数', key: 'num', align: 'center' },
                { title: '占比', key: 'percent', align: 'center' }
            ])
        }
    },
    computed: {
        classList () {
            const classList = this.training.classList || []
            return classList
        },
        pieData () {
            const len = this.list.length
            return this.list.slice(0, len - 1).map(item => {
                return {
                    value: item.num,
                    name: item.score
                }
            })
        }
    },
    mounted () {
        this.queryList()
    },
    methods: {
        search () {
            this.params.pageNum = 1
            this.queryList()
        },
        queryList () {
            distributionDiagram({
                practicalId: this.id,
                ...this.params
            }).then(res => {
                if (res.data.code === '0000') {
                    const data = res.data.data
                    const len = data.length
                    len && (data[len - 1].score = '合计')
                    this.list = data
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        clearSearch () {
            this.params.classId = ''
            this.queryList()
        },
        toggleModel () {
            this.$emit('toggleMode', 'TrainingScore')
        }
    }
}
</script>
